<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      leftIcon="back"
      title="确认订单"
      leftText=""
      rightText=""
      @clickLeft="goBack"
      fixed
      statusBar
      backgroundColor="#ffffff"
    ></uni-nav-bar>
    
    <!-- 订单步骤条 -->
    <view class="order-steps">
      <view class="step">
        <text>预约</text>
        <text>服务</text>
      </view>
      <view class="step-line"></view>
      <view class="step active">
        <text>支付</text>
        <text>订单</text>
      </view>
      <view class="step-line"></view>
      <view class="step">
        <text>门店</text>
        <text>服务</text>
      </view>
    </view>
    
    <!-- 店铺信息 -->
    <view class="shop-info">
      <view class="shop-name">
        <image class="shop-icon" src="/static/shop.png"></image>
        <text>伟业汽车美容店路店</text>
      </view>
      <view class="shop-address">
        <text>山阳区人民中路32号</text>
      </view>
    </view>
    
    <!-- 用户信息 -->
    <view class="user-info">
      <view class="user-name">
        <image class="user-icon" src="/static/user.png"></image>
        <text>张三</text>
      </view>
      <view class="user-phone">
        <text>18895039309</text>
      </view>
    </view>
    
    <!-- 车辆信息 -->
    <view class="car-info">
      <view class="car-detail">
        <image class="car-icon" src="/static/car.png"></image>
        <text>奔驰FWE4/豫A98FHJ</text>
      </view>
      <image class="edit-icon" src="/static/edit.png"></image>
    </view>
    
    <!-- 服务产品 -->
    <view class="service-products">
      <view class="section-header">
        <text>服务产品</text>
        <text class="product-count">共选择1项服务产品</text>
      </view>
      
      <view class="product-item">
        <text class="product-name">精洗汽车</text>
        <text class="product-price">¥199</text>
      </view>
    </view>
    
    <!-- 优惠券 -->
    <view class="coupons">
      <view class="coupon-item">
        <text class="coupon-label">代金券/优惠券</text>
        <view class="coupon-value">
          <text>-10元</text>
          <image class="arrow-icon" src="/static/arrow.png"></image>
        </view>
      </view>
    </view>
    
    <!-- 底部合计和提交按钮 -->
    <view class="bottom-bar">
      <view class="total-amount">
        <text>合计：</text>
        <text class="amount">¥30.50</text>
      </view>
      <button class="submit-btn" @click="submitOrder">提交订单</button>
    </view>
    
    <!-- 联系客服 -->
    <view class="contact-service">
      <image class="service-icon" src="/static/service.png"></image>
      <text>联系客服</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
// import uniNavBar from '@dcloudio/uni-ui/lib/uni-nav-bar/uni-nav-bar.vue';

// 订单数据
const orderData = reactive({
  shopName: '伟业汽车美容店路店',
  shopAddress: '山阳区人民中路32号',
  userName: '张三',
  userPhone: '18895039309',
  carInfo: '奔驰FWE4/豫A98FHJ',
  products: [
    { name: '精洗汽车', price: 199 }
  ],
  couponDiscount: 10,
  totalAmount: 30.50
});

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 提交订单
const submitOrder = () => {
  uni.showModal({
    title: '提交订单',
    content: '确认提交订单吗？',
    success: (res) => {
		
		uni.navigateTo({
			url:"/packageIndex/car-wash/pay-success/pay-success"
		})
		
      // if (res.confirm) {
      //   uni.showToast({
      //     title: '订单提交成功',
      //     icon: 'success'
      //   });
        // 在实际项目中，这里会调用提交订单的 API
      // }
    }
  });
};
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  padding: 0 20px;
  height: 100vh;
  position: relative;
}

/* 订单步骤条 */
.order-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  margin-top: 10px;
}

.step {
  text-align: center;
  color: #999;
}

.step.active {
  color: #007bff;
}

.step text {
  display: block;
  font-size: 14px;
}

.step-line {
  height: 1px;
  background-color: #ddd;
  flex: 1;
}

/* 店铺信息 */
.shop-info {
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
}

.shop-name {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.shop-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.shop-address {
  font-size: 14px;
  color: #666;
}

/* 用户信息 */
.user-info {
  display: flex;
  justify-content: space-between;
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
}

.user-name {
  display: flex;
  align-items: center;
}

.user-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.user-phone {
  font-weight: bold;
}

/* 车辆信息 */
.car-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
}

.car-detail {
  display: flex;
  align-items: center;
}

.car-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.edit-icon {
  width: 20px;
  height: 20px;
}

/* 服务产品 */
.service-products {
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.product-count {
  font-size: 14px;
  color: #999;
}

.product-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.product-name {
  font-size: 15px;
}

.product-price {
  color: #ff6b6b;
}

/* 优惠券 */
.coupons {
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
}

.coupon-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.coupon-label {
  font-size: 15px;
}

.coupon-value {
  display: flex;
  align-items: center;
  color: #007bff;
}

.arrow-icon {
  width: 16px;
  height: 16px;
  margin-left: 8px;
}

/* 底部合计和提交按钮 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: white;
  border-top: 1px solid #eee;
}

.total-amount {
  font-size: 16px;
}

.amount {
  color: #ff6b6b;
  font-weight: bold;
  font-size: 18px;
}

.submit-btn {
  background-color: #ff6b6b;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
}

/* 联系客服 */
.contact-service {
  position: absolute;
  bottom: 70px;
  left: 20px;
  display: flex;
  align-items: center;
}

.service-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
</style>